
<template>
  <el-row>
    <el-col :span="6">
      <el-input v-model="name" placeholder="档案号/姓名"> </el-input>
    </el-col>
    <el-col :span="6" :push="1">
      <el-button type="primary" @click="listAxios">搜索</el-button>
    </el-col>
    <el-col :span="24">
      <el-button type="primary" @click="addHealthPlanbtn">新增</el-button>
    </el-col>

    <el-col :span="24">
      <el-table
        :data="sportsEvebtsTavle"
        stripe
        style="width: 100%"
        @click="listAxios"
        :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }"
      >
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="num" label="编码"> </el-table-column>
        <el-table-column prop="name" label="运动名称"> </el-table-column>
        <el-table-column prop="intensity" label="运动强度"> </el-table-column>
        <el-table-column prop="equivalent" label="千步当量"> </el-table-column>
        <el-table-column prop="time" label="运动时间"> </el-table-column>
        <el-table-column prop="" label="年龄区间">
          <el-table-column prop="ageMin" label="年龄下限"></el-table-column>
          <el-table-column prop="ageMax" label="年龄上限"></el-table-column>
        </el-table-column>

        <el-table-column prop="address" label="操作">
          <template scope="scope">
            <el-button size="mini" plain @click="events(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" plain @click="deleteHealthPlan(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="10" :push="14">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(count)"
      >
      </el-pagination>
    </el-col>

    <el-col>
      <el-dialog :title="modelName" :visible.sync="dialogFormAdd">
        <el-form :model="form" :inline="true">
          <el-form-item label="运动名称" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              :disabled="form.id != '' ? true : false"
            ></el-input>
          </el-form-item>
          <el-form-item label="编码" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动强度" :label-width="formLabelWidth">
            <el-input
              v-model="form.intensity"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="运动时间" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄下限" :label-width="formLabelWidth">
            <el-input
              v-model="form.ageMin"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="年龄上限" :label-width="formLabelWidth">
            <el-input v-model="form.ageMax" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="千步当量" :label-width="formLabelWidth">
            <el-input
              v-model="form.equivalent"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="拉升部位"
            prop="type"
            :label-width="formLabelWidth"
          >
            <el-select v-model="form.part" autocomplete="off">
              <el-option label="上肢" value="上肢"></el-option>
              <el-option label="下肢" value="下肢"></el-option>
              <el-option label="腰背" value="腰背"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="适用性别"
            prop="hypertension"
            :label-width="formLabelWidth"
          >
            <el-select v-model="form.sex" autocomplete="off">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="动作方法" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="form.method"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="注意事项" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="form.attention"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addAdmin()">确 定</el-button>
          <el-button @click="dialogFormAdd = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
export default {

  data() {
    return {
      page: 1,
      limit: 5,
      name: "",
      sportsEvebtsTavle: [],
      count: "",

      //主页表单面数据渲染

      form: {
        ageMax: "", //年龄最大值
        ageMin: "", //年龄最小值
        attention: "", //注意事项
        created: "", //创建
        deleted: "", //删除
        equivalent: "",//千步当量
        id: "", //序号
        intensity: "", //运动强度
        method: "", //方法
        name: "", //运动名
        num: "", //编码
        part: "", //运动部位
        sex: "", //性别
        time: "", //运动时间
        updated: "", //
      },
      dialogTableVisible: false,
      dialogFormAdd: false,
      formLabelWidth: "120px",
      modelName: "新增",
    };
  },
  created() {
    this.listAxios();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = Number(val);
      this.listAxios();
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.listAxios();
    },
    // 查询axios调用
    listAxios() {
      this.$axios({
        method: "GET",
        url: "/sport/list",
        params: { page: this.page, limit: this.limit, name: this.name },
      }).then((res) => {
        //console.log(res);
        this.sportsEvebtsTavle = res.data;
        this.count = res.count;
      });
    },

    //新增按钮
    addHealthPlanbtn() {
      this.form = {
        ageMax: "",
        ageMin: "",
        attention: "",
        created: "",
        deleted: 0,
        equivalent: "",
        id: "",
        intensity: "",
        method: "",
        name: "",
        num: "",
        part: "",
        sex: "",
        time: "",
        updated: "",
      };
      this.dialogFormAdd = true;
    },
    events(e) {
      this.modelName = "修改";
      this.dialogFormAdd = true;
      this.form = {...e };
    },
    addAdmin(e) {
      this.modelName = e;
      if (this.form.id == "") {
        this.$axios({
          method: "POST",
          url: "/sport/add",
          data: this.form,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.listAxios();
          }
        });
      } else {
        this.$axios({
          method: "POST",
          url: "/sport/update",
          data: this.form,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.listAxios();
          }
        });
      }

      this.dialogFormAdd = false;
    },
    deleteHealthPlan(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          method: "GET",
          url: "/sport/delete",
          params: { id: e.id },
        }).then((res) => {
          if (res.code === 0) {
            this.listAxios();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.el-col {
  margin-bottom: 20px;
}
</style>